<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js———轮播图实现</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
         .box {
             /* 给父盒子设置成绝对定位 */
             position: relative;
             width: 520px;
             height: 300px;
             border:10px solid aquamarine;
             margin: 0 auto;
             margin-top: 100px;
             overflow: hidden;
 
         }
         .box .uls {
             /* 子绝父相，儿子设定绝对定位 长度设置可以放的下需要的图片数量 */
            position:absolute;
            width: 3120px;
            height: 300px; 
         }
         .box .uls li {
             /* 设置浮动，让li元素浮动起来 */
             float: left;
             list-style: none;
         }
         .box .uls li img {
            width: 520px;
            height:300px;
         }
         .box .uls2 {
             /* 设置底下的小跳转框，绝对定位的时候，
             可以通过left：50% ，margin-left：盒子一半的宽度来实现居中 */
             position: absolute;
             bottom: 20px;
             left: 50%;
             margin-left: -135px;
             height: 20px;
             width: 270px ;

         }
           .box .uls2 li {
               /* 给底下的小框框设置透明度和圆角 */
           float: left;
           width: 25px;
           height: 10px;
           border-radius: 5px;
           margin: 0px 10px;
           background-color: rgba(0,0,0,0.5);
           list-style: none;
           cursor: pointer;
         }
         /* 如果点击到有这个类就删除，没有就添加 */
         .change {
            background-color: darkblue !important;  /*增加权重*/
         }
    </style>
</head>
<body>
     <script>
         window.onload = function () {

          let uls = document.querySelector(".uls");
          let lis2 = document.querySelectorAll(".uls2 li");
          

          uls.style.left = 0 + "px"; //让内联元素left初始化为0

        //  自己封装函数 ，js有现成的方法，我自己无聊自己封装。
        // 1.添加类名的函数
         function add (obj,cn) {
             obj.className =" "+cn;
         }
         //2.判断className中是否有这个类名的
         function has (obj,cn) {
             let a = new RegExp(`\\b${cn}\\b`);
             if(a.test(obj.className)) {
                 return true;
             }
             else {
                 return false;
             }
         }
         //3.删除选定的类名
         function del (obj,cn) {
               obj.className = obj.className.replace(`${cn}`,""); //旧值然后新值
         }

         //4.如果有这个类名就删除，没有就添加。
         function toggle (obj,cn) {
          if(has(obj,cn)) {
              del(obj,cn);
          }
             else {
                 add(obj,cn)
             }
         }

         //让轮播图上的小圆点动起来
         //保存第一个点,如果点击的不是第一个点，而且第一个点有class的话，重新绑定一个点给chs。
        
         //点击切换图片，本质是移动div
          //遍历绑定事件
        //   创建一个变量保存第一个li的值
          let chs = lis2[0] ,index = 1;
              
          /* 获取当前i的值，第一次移动会到第二张图片，
          所以到第六张图片的时候，其实只是移动了五次*/
         for(let i= 0; i<lis2.length; i++) {
             lis2[i].onclick = function () {
                // 点击第n个就往左偏移,-520px * n 的偏移量，520是盒子的宽度
                uls.style.left = -520*(i)+"px";
                if(chs!=lis2[i]&&has(chs,"change")) {
                    del(chs,"change");
                    toggle(lis2[i],"change");
                }
                chs = lis2[i];
                index = i; 
                
             }
         }
              
         function move () {
           
            let speed = 2; //设定移动的速度
            let son; //声明一个变量来存放定时器的地址。
            // 两个定时器嵌套实现
            let inter = setInterval(()=>{
            
                clearInterval(son);

                  //控制图片的移动
                    son = setInterval(()=>{ 
                        //把当前的盒子偏移量转换为数值，如果大于

                        /*底下的index有两个作用，一个是如果我们点击盒子底部跳转框时候，
                        会获取一个当前跳转框的索引值。例如我们点了第3个跳转框，
                        我们的index值就是2，这个值刚好偏移到第三张图片完全露出，
                        这样图片不止会跳转到第三张，同时-index*520也会被限制住。
                        第二个作用就是当我们不点击跳转框时，index值默认为1*/
                    if(parseInt(uls.style.left)> -index*520) {

                    uls.style.left = parseInt(uls.style.left)-speed+"px"; 
                    
                }  
                /*当我们的偏移值大于-index*520时，
                我们需要关闭内部的定时器，同时index++，进入下一次循环。*/
                 else {
                     clearInterval(son);
                     index++;
                 }
               },5)
            
                //当index大于5时，让index = 0，图片重新回到第一张。
                if(index>5) {
                    uls.style.left = 0+"px"; 
                    index = 0;
                }
              
           },3000);
           
           //设置底下小方块的移动，全部用index代替
        //    这一部分是底下跳转框的跟随跳动，利用类名的添加去改变颜色
           let yuan = setInterval(()=>{
            if(has(chs,"change")) {
                    del(chs,"change");
                    toggle(lis2[index],"change");
                }
                chs = lis2[index];

          },3000);
           
         }
         move();
                    
        }
       
     </script>
    <div class="box">
        
        <ul class="uls">
            <li><img src="p1.jpeg" alt=""></li>
            <li><img src="p2.jpeg" alt=""></li>
            <li><img src="p3.jpg" alt=""></li>
            <li><img src="p4.jpeg" alt=""></li>
            <li><img src="p5.jpeg" alt=""></li>
            <li><img src="p6.jpeg" alt=""></li>
        </ul>
        <ul class="uls2">
            <li class="change"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>